<template>
  <div class="inRegister">
    <div class="img">Register...</div>

    <el-form
      :model="registerForm"
      :rules="rules"
      ref="registerForm"
      label-width="100px"
      class="demo-ruleForm"
      label-position="left"
    >
      <template v-for="(item, i) in registerInfo">
        <el-form-item :label="item.label" :prop="item.prop">
          <template v-if="item.prop === 'cid'">
            <select-community
              :cid.sync="registerForm[item.prop]"
              :pid.sync="registerForm.pid"
              :bid.sync="registerForm.bid"
              :sid.sync="registerForm.sid"
            ></select-community>
          </template>
          <template v-else-if="item.prop === 'address'">
            <template>
              <select-address
                :address.sync="registerForm[item.prop]"
                ref="liveAddressRef"
              ></select-address>
            </template>
          </template>
          <template v-else>
            <el-input
              v-model="registerForm[item.prop]"
              :maxlength="item.prop == 'tel' ? 11 : false"
              :show-password="
                item.prop == 'password' || item.prop == 'surePassword'
                  ? true
                  : false
              "
            ></el-input>
          </template>
        </el-form-item>
      </template>
      <div class="login-btn">
        <van-button
          round
          block
          color="#1989fa"
          plain
          @click="clean"
          native-type="button"
        >
          清空
        </van-button>
        <van-button round block type="info" @click="getRegister">
          提交
        </van-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { login, register } from '@/api/user/index.js'
import { getCommunityList } from '@/api/community/'
import VDistpicker from 'v-distpicker'

export default {
  components: {
    VDistpicker,
  },
  watch: {
    registerForm: {
      handler(val) {
        console.debug(val.cid, val.pid, val.bid, val.sid)
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    const checkSurePassword = (rule, value, callback) => {
      if (value !== this.registerForm.password) {
        callback(new Error('两次输入的密码不同，请重新输入'))
      } else {
        callback()
      }
    }
    return {
      registerInfo: {
        uname: { label: '昵称', prop: 'uname' },
        name: { label: '姓名', prop: 'name' },
        account: { label: '账号', prop: 'account' },
        password: { label: '密码', prop: 'password' },
        surePassword: { label: '重复密码', prop: 'surePassword' },
        cid: { label: '社区', prop: 'cid' },
        address: { label: '地址', prop: 'address' },
        tel: { label: '电话', prop: 'tel' },
        email: { label: '邮箱', prop: 'email' },
      },
      registerForm: {
        // 昵称
        uname: '昵称',
        // 姓名
        name: '姓名',
        // 地址
        address: '',
        // 账号
        account: '18711111111',
        // 密码
        password: 'p123456789',
        surePassword: 'p123456789',
        // 社区编号
        cid: '',
        pid: '',
        bid: '',
        sid: '',
        // 电话
        tel: '18711111111',
        // 邮箱
        email: 'pp@qq.com',
      },
      // 校验
      rules: {
        uname: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
        account: [
          { required: true, message: '账号不能为空', trigger: 'blur' },
          {
            pattern: /[0-9A-Za-z]{6,}$/,
            message: '请输入6位以上的数字或字母的账号',
          },
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          {
            pattern: /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z]{9,}$/,
            message: '请输入包含数字、字母的9位以上的密码',
          },
        ],
        surePassword: [
          { required: true, message: '重复密码不能为空', trigger: 'blur' },
          { validator: checkSurePassword, trigger: 'blur' },
        ],
        cid: [{ required: true, message: '社区不能为空', trigger: 'blur' }],
        tel: [
          {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '请输入正确的电话格式',
            trigger: 'blur',
          },
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
        ],
      },
      // 社区编号数组
      cidArr: [],
    }
  },
  created() {
    this.initCommunityList()
  },
  methods: {
    /* 请求 */
    // 获取社区列表
    initCommunityList() {
      getCommunityList().then((res) => {
        this.cidArr = res.data
      })
    },
    // 注册
    getRegister() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          delete this.registerForm.surePassword
          console.log(this.registerForm)
          this.$store
            .dispatch('REGISTER', this.registerForm)
            .then(() => {
              let data = {
                account: this.registerForm.account,
                password: this.registerForm.password,
              }
              this.$store
                .dispatch('LOGIN', data)
                .then(() => {
                  this.$router.push('/home')
                })
                .catch((err) => {
                  console.log(err)
                })
            })
            .catch((err) => {
              console.log(err)
            })
        } else {
          return false
        }
      })
    },
    /* DOM 操作 */
    onFailed(errorInfo) {
      console.log('failed', errorInfo)
    },
    clean() {
      this.registerForm = {
        // 昵称
        uname: '',
        // 姓名
        name: '',
        // 地址
        address: '',
        // 账号
        account: '',
        // 密码
        password: '',
        // 社区编号
        cid: '',
        // 电话
        tel: '',
        // 邮箱
        email: '',
      }
    },
  },
}
</script>

<style lang="less" scoped>
.inRegister {
  /* background-color: skyblue; */
  position: relative;
  padding: 3.75rem 0;
  // height: 26.5rem;
  width: 100%;
  .img {
    position: absolute;
    left: 0;
    top: 0;
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 2.1rem;
    color: #1989fa;
  }
  .login-btn {
    margin: 1.25rem;
    margin-top: 2.5rem;
    display: flex;
    .van-button {
      margin: 0 0.3125rem;
    }
  }
}
</style>
